import React, { useContext, useEffect } from 'react'
import { Button, Form, Input, Select } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import style from './style.module.less'
import { loginContext } from '../../context'

export default () => {
  const { loginRightConfig } = useContext(loginContext)
  const pushRouter = useNavigate()
  // useEffect(() => {

  // },[loginRightConfig.loginInfo])
  return (
    <div className={style.login}>
      <div className={style.center}>
        <Form
          name='basic'
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={loginRightConfig.enterLogin}
          // onFinishFailed={onFinishFailed}
          autoComplete='off'
        >
          <Form.Item name='username' rules={[{ validator: loginRightConfig.validatorUsername }]}>
            <Input
              prefix={<UserOutlined rev={undefined} />}
              onChange={(e) => {
                loginRightConfig.usernameChangeValue(e)
              }}
              maxLength={11}
              placeholder='请输入手机号'
              style={{ width: 320, height: 40 }}
            />
          </Form.Item>

          {loginRightConfig.accountAdmins.length > 1 && (
            <Form.Item name='accountType' rules={[{ required: true, message: '请选择管理员!' }]}>
              <Select
                placeholder='请选择管理员'
                onChange={loginRightConfig.selectAdminId}
                style={{ width: 320, height: 40 }}
                allowClear={false}
              >
                {loginRightConfig.adminSelect?.map((item: any) => (
                  <Select.Option key={item.id} value={item.value}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          )}

          <Form.Item name='password' rules={[{ validator: loginRightConfig.validatorPassword }]}>
            <Input.Password
              prefix={<LockOutlined rev={undefined} />}
              autoComplete='new-password'
              visibilityToggle={false}
              placeholder='请输入登录密码'
              style={{ width: 320, height: 40 }}
            />
          </Form.Item>

          <Form.Item>
            <Button style={{ width: 320, height: 40, marginTop: 30, borderRadius: 3 }} type='primary' htmlType='submit'>
              登录
            </Button>
          </Form.Item>
          <div className={style.bottomFont}>
            <div
              onClick={() => {
                pushRouter('/user/AppleJoin')
              }}
              style={{ color: '#5584FF', cursor: 'pointer' }}
            >
              申请加入
            </div>
            <div
              onClick={() => {
                pushRouter('/user/ForgetPassword')
              }}
              style={{ color: '#9BA2A8', cursor: 'pointer' }}
            >
              忘记密码
            </div>
          </div>
        </Form>
      </div>
    </div>
  )
}
